<template>
  <div class="example1-wrapper">
    <div class="fr clearfix mb15">
      <bk-form form-type="inline">
        <bk-form-item label="业务">
          <bk-select
            :disabled="false"
            style="width: 250px;"
            ext-cls="select-custom"
            @change="handleBizChange"
            ext-popover-cls="select-popover-custom"
            searchable>
            <bk-option
              v-for="item in biz_list"
              :key="item.bk_biz_id"
              :id="item.bk_biz_id"
              :name="item.bk_biz_id + '-' + item.bk_biz_name"></bk-option>
          </bk-select>
        </bk-form-item>
        <bk-form-item label="集群">
          <bk-select
            v-model="set_id"
            :disabled="false"
            style="width: 250px;"
            ext-cls="select-custom"
            @change="handleSetChange"
            ext-popover-cls="select-popover-custom"
            searchable>
            <bk-option
              v-for="item in set_list"
              :key="item.bk_set_id"
              :id="item.bk_set_id"
              :name="item.bk_set_id + '-' + item.bk_set_name"></bk-option>
          </bk-select>
        </bk-form-item>
        <bk-form-item label="模块">
          <bk-select
            v-model="module_id"
            :disabled="false"
            style="width: 250px;"
            ext-cls="select-custom"
            @change="handleModuleChange"
            ext-popover-cls="select-popover-custom"
            searchable>
          </bk-select>
        </bk-form-item>
        <bk-form-item label="名称">
          <bk-input placeholder="名称" v-model="formData.name" />
        </bk-form-item>
        <bk-form-item label="日期">
          <bk-date-picker placeholder="日期" :timer="false" v-model="formData.date" />
        </bk-form-item>
        <bk-form-item>
          <bk-button theme="primary" title="提交">搜索</bk-button>
        </bk-form-item>
        <bk-form-item>
          <bk-button theme="primary" title="查询" 
                     @click="searchHosts">查询</bk-button>
        </bk-form-item>
           
      </bk-form>
    </div>
     <bk-sideslider
          class="bk-layout-component-nelgpjna sideslider1e5ab"
          :is-show.sync="isSidesliderShow"
          :title="('主机详情')"
          :show-mask="false"
          :width="600"
          direction="right">
          <template slot="content">
                    <div class="step-detail-container">
                    <div class="step-detail-item" v-for="item in 
                    host_detail" :key="item.bk_property_id">
                    <strong>{{ item.bk_property_name + '：' }}</strong>
                    <span>{{ item.bk_property_value ? 
                    item.bk_property_value : '无' }}</span>
                    </div>
                    </div>
          </template>
          </bk-sideslider>
    <bk-table style="margin-top: 15px;"
              :data="host_list"
              :size="size"
              :pagination="pagination"
              @page-change="handlePageChange">
                  <bk-table-column label="主机 ID" prop="bk_host_id" />
                  <bk-table-column label="主机 IP" prop="bk_host_innerip" />
                  <bk-table-column label="操作人" prop="operator" />
                  <bk-table-column label="备份维护人" prop="bk_bak_operator" />
                  <bk-table-column label="操作" width="150">
                  <template slot-scope="props">
                  <bk-button theme="primary"
                  text :disabled="props.row.status === '创建中'" @click="getHostDetail(props.row.bk_host_id)">查看详情</bk-button>
              </template>
              </bk-table-column>
              </bk-table>
    <bk-table style = "margin-top: 15px;"
              :data="tableData"
              :size="size"
              :pagination="pagination"
              @page-change="handlePageChange">
      <bk-table-column type="selection" width="60" align="center" />
      <bk-table-column type="index" label="序列" align="center" width="60" />
      <bk-table-column label="名称/内网IP" prop="ip" />
      <bk-table-column label="来源" prop="source" />
      <bk-table-column label="状态" prop="status" />
      <bk-table-column label="创建时间" prop="create_time" />
      <bk-table-column label="操作" width="150">
        <template slot-scope="props">
          <bk-button theme="primary"
                     text :disabled="props.row.status === '创建中'" @click="reset(props.row)">重置</bk-button>
          <bk-button theme="primary" text @click="remove(props.row)">移除</bk-button>
          <bk-button theme="primary" text @click="getHostDetail(props.row.bk_host_id)">查看详情</bk-button>
        </template>
      </bk-table-column>
    </bk-table>
  </div>
</template>

<script>
export default {
  components: {
  },
data() {
    return {
      size: 'small',
      formData: {
        name: '',
        date: '',
      },
      tableData: [],
      biz_list: [], // 业务列表
      set_list: [], // 集群列表
      module_list: [], // 模块列表
      host_lists: [], //主机列表
      host_detail: [], //主机详情列表
      biz_id: null, // 当前选中的业务 ID
      set_id: null, // 当前选中的集群 ID
      module_id: null, // 当权选中的模块 ID
      operator: null,     //操作人
      bak_operator: null, //备份维护人
      isSidesliderShow: false,
      pagination: {
        current: 1,
        count: 0,
        limit: 10,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getTableData();
    },
    async getTableData() {
      try {
        const res = await this.$store.dispatch('example/getTableData', {}, { fromCache: true });
        this.tableData = res.data.list;
        this.pagination.count = res.data.list.length;
      } catch (e) {
        console.error(e);
      }
    },
    toggleTableSize() {
      const size = ['small', 'medium', 'large'];
      const index = (size.indexOf(this.size) + 1) % 3;
      this.size = size[index];
    },
    handlePageChange(page) {
      this.pagination.current = page;
    },
    remove(row) {
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
    },
    reset(row) {
      // eslint-disable-next-line no-param-reassign
      row.status = '创建中';
    },
  },
};
</script>
